<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>输入微调器组件bootstrap-touchspin - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="js/bootstrap-touchspin/jquery.bootstrap-touchspin.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>

</style>
</head>
  
<body>
<div class="container-fluid">

  <div class="row">

  	<div class="col-lg-12">
  	  <div class="card">
  	    <header class="card-header">
  	      <div class="card-title">输入微调器组件 bootstrap-touchspin</div>
  	    </header>
  		<div class="card-body">
          
  		  <div class="row">
            <div class="col-md-6">
              <div class="mb-3">
                <label for="example-attr" class="form-label">使用data-属性配置示例</label>
                <input type="text" id="example-attr" name="example-attr" class="form-control" value="55"   
                data-bts-min="0"
                data-bts-max="100"
                data-bts-init-val=""
                data-bts-step="1"
                data-bts-decimal="0"
                data-bts-step-interval="100"
                data-bts-force-step-divisibility="round"
                data-bts-step-interval-delay="500"
                data-bts-prefix=""
                data-bts-postfix=""
                data-bts-prefix-extra-class=""
                data-bts-postfix-extra-class=""
                data-bts-booster="true"
                data-bts-boostat="10"
                data-bts-max-boosted-step="false"
                data-bts-mousewheel="true"
                data-bts-button-down-class="btn btn-secondary"
                data-bts-button-up-class="btn btn-secondary"/>
              </div>
              <div class="mb-3">
                <label for="example-postfix" class="form-label">带后缀的示例</label>
                <input type="text" id="example-postfix" class="form-control" value="55" name="example-postfix" />
              </div>
              <div class="mb-3">
                <label for="example-prefix" class="form-label">带前缀的示例</label>
                <input type="text" id="example-prefix" class="form-control" value="0" name="example-prefix" />
              </div>
              <div class="mb-3">
                <label for="example-empty" class="form-label">空值的初始化</label>
                <input type="text" id="example-empty" class="form-control" value="" name="example-empty" />
              </div>
              <div class="mb-3">
                <label for="example-button-postfix" class="form-label">按钮后缀(v4中无效，加btn会影响整个元素的高度)</label>
                <input type="text" id="example-button-postfix" class="form-control" name="example-button-postfix" />
              </div>
              <div class="mb-3">
                <label for="example-button-class" class="form-label">更改按钮类</label>
                <input type="text" id="example-button-class" class="form-control" name="example-button-class" />
              </div>
              <div class="mb-3">
                <label for="example-boundaries" class="form-label">禁用边界</label>
                <input type="text" id="example-boundaries" class="form-control" name="example-boundaries" value="1234567890" />
              </div>
            </div>
            <div class="col-md-6">
              <div class="mb-3">
                <label for="example-vertical" class="form-label">按钮垂直对齐</label>
                <input type="text" id="example-vertical" class="form-control" value="" name="example-vertical" />
              </div>
              <div class="mb-3">
                <label for="example-icon-vertical" class="form-label">带有自定义图标的垂直按钮</label>
                <input type="text" id="example-icon-vertical" class="form-control" value="" name="example-icon-vertical" />
              </div>
              <div class="mb-3">
                <label for="example-callback" class="form-label">使用numeraljs格式化数字的回调示例（可以使用任何其他方法）</label>
                <input type="text" id="example-callback" name="example-callback" class="form-control"
                  value="10000.00"
                  data-bts-min="-1000000"
                  data-bts-max="1000000"
                  data-bts-step=".01"
                  data-bts-decimals="2"  />
              </div>
              <div class="mb-3">
                <label for="example-initval" class="form-label">初始化数值（输入框可用<code>input-sm</code>、<code>input-lg</code>指定大小）</label>
                <input type="text" id="example-initval" class="form-control" name="example-initval" />
              </div>
              <div class="mb-3">
                <label for="example-button-group" class="form-label">按钮组</label>
                <div class="input-group">
                  <input type="text" id="example-button-group" class="form-control" name="example-button-group" value="50" />
          
                  <button type="button" class="btn btn-default">Action</button>
                  <button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li><div role="separator" class="dropdown-divider"></div></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                  </ul>
                </div>
              </div>
              <div class="mb-3">
                <label for="example-replaced" class="form-label">空白/非数字替换</label>
                <input type="text" id="example-replaced" class="form-control" name="example-replaced" value="50" />
              </div>
              <div class="mb-3">
                <label for="example-event" class="form-label">事件示例</label>
                <input type="text" id="example-event" class="form-control" name="example-event" value="50" />
              </div>
            </div>
            <div class="col-md-12">
              <pre id="pretextarea" style="height:200px;overflow:auto;"></pre>
            </div>
          </div>
          
  	    </div>
  	  </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="js/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script>
<script src="https://cdn.bootcss.com/numeral.js/2.0.6/numeral.min.js"></script><!--有个示例需要用到的，这里用的网上的js，有需要的可自行下载-->
<script src="https://cdn.bootcss.com/numeral.js/2.0.6/locales/chs.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // 使用data-属性配置示例
    $("#example-attr").TouchSpin({});
    // 后缀的示例
    $("#example-postfix").TouchSpin({
        min: 0,
        max: 100,
        step: 0.1,
        decimals: 2,
        boostat: 5,
        maxboostedstep: 10,
        postfix: '%'
    });
    // 前缀的示例
    $("#example-prefix").TouchSpin({
        min: -1000000000,
        max: 1000000000,
        stepinterval: 50,
        maxboostedstep: 10000000,
        prefix: '¥'
    });
    // 按钮垂直对齐
    $("#example-vertical").TouchSpin({
        verticalbuttons: true,
    });
    // 带有自定义图标的垂直按钮
    $("#example-icon-vertical").TouchSpin({
        verticalbuttons: true,
        verticalup: '<i class="mdi mdi-chevron-up"></i>',
        verticaldown: '<i class="mdi mdi-chevron-down"></i>'
    });
    // 使用numeraljs格式化数字的回调示例
    numeral.locale('chs');
    $("#example-callback").TouchSpin({
        callback_before_calculation: function (v) {
            return numeral(v).value();
        },
        callback_after_calculation: function (v) {
            return numeral(v).format("$0,0.00");
        }
    });
    // 空值的初始化
    $("#example-empty").TouchSpin();
    // 初始化数值
    $("#example-initval").TouchSpin({
        initval: 40
    });
    // 按钮后缀
    $("#example-button-postfix").TouchSpin({
        postfix: "一个按钮",
        //postfix_extraclass: "btn btn-info"
    });
    // 按钮组
    $("#example-button-group").TouchSpin({
        prefix: "pre",
        postfix: "post"
    });
    // 更改按钮类
    $("#example-button-class").TouchSpin({
        buttondown_class: "btn btn-link",
        buttonup_class: "btn btn-link"
    });
    // 空白/非数字替换，输入空或者非数字时会被替换成10
    $("#example-replaced").TouchSpin({
        replacementval: 10
    });
    // 禁用边界
    $("#example-boundaries").TouchSpin({
        min: null,
        max: null
    });
    // 事件示例
    var i = $("#example-event"),
        demoarea = $("#pretextarea"),
        text = "";

    function writeLine(line) {
        text += line + "\n";
        demoarea.text(text);
        demoarea.scrollTop(
            demoarea[0].scrollHeight - demoarea.height()
        );
    }

    i.TouchSpin({});
    i.on("touchspin.on.startspin", function () {
        writeLine("touchspin.on.startspin");
    });
    i.on("touchspin.on.startupspin", function () {
        writeLine("touchspin.on.startupspin");
    });
    i.on("touchspin.on.startdownspin", function () {
        writeLine("touchspin.on.startdownspin");
    });
    i.on("touchspin.on.stopspin", function () {
        writeLine("touchspin.on.stopspin");
    });
    i.on("touchspin.on.stopupspin", function () {
        writeLine("touchspin.on.stopupspin");
    });
    i.on("touchspin.on.stopdownspin", function () {
        writeLine("touchspin.on.stopdownspin");
    });
    i.on("touchspin.on.min", function () {
        writeLine("touchspin.on.min");
    });
    i.on("touchspin.on.max", function () {
        writeLine("touchspin.on.max");
    });
});
</script>
</body>
</html>